<template>
  <div class="film">
    <Navi :title="'电影演出影院'" :flexd="true" />
    <Search />
    <div class="list">
      <van-tabs
        v-model="active"
        :line-width="0"
        :title-active-color="'#FA2900'"
      >
        <van-tab title="热映">
          <div class="hostbox" v-for="(item, index) in host" :key="index">
            <div class="hostLeft" @click="goDetails(item.id, true)">
              <div class="himg">
                <img
                  class="auto-img"
                  :src="item.img"
                  alt=""
                  v-lazy="item.img"
                />
              </div>
              <div class="textbox">
                <div class="htitle ont-text">{{ item.nm }}</div>
                <div class="hsum">猫眼评分：{{ item.sc.toFixed(1) }}</div>
                <div class="hren one-text">主演：{{ item.star }}</div>
                <div class="hren">上映日期：{{ item.rt }}</div>
              </div>
            </div>
            <div class="hostRight">
              <van-button
                :color="item.showStateButton.color"
                size="small"
                round
                type="info"
                @click="goShop(item.id)"
                >{{ item.showStateButton.content }}</van-button
              >
            </div>
          </div>
        </van-tab>
        <van-tab title="影院">
          <div class="navbox">
            <van-dropdown-menu active-color="#fa2900">
              <van-dropdown-item
                v-model="value1"
                @change="getId1()"
                :options="district"
              />
            </van-dropdown-menu>
          </div>

          <div class="xuan" ref="jjj" @scroll="sollFn()">
            <div
              class="item"
              ref="item"
              v-for="(item, index) in updata"
              :key="index"
              @click="
                goCinema(item.cinemaId, id, item.location, item.title, time)
              "
            >
              <div class="tbox">
                <div class="title one-text">{{ item.title }}</div>
                <div class="tsum">
                  {{ item.price.n === "" ? "0" : item.price.n
                  }}<span class="yuan">元</span><span class="qi">起</span>
                </div>
              </div>
              <div class="dbox">
                <div class="dtitle one-text">{{ item.location }}</div>
                <div class="dsum">{{ item.distance }}</div>
              </div>
              <div class="zhe">
                <div class="tui" v-for="(e, i) in services[index]" :key="i">
                  {{ e.text }}
                </div>
              </div>
              <div class="youhui">
                <div class="yimg">
                  <img class="auto-img" :src="discount[index].card" alt="" />
                </div>
                <div class="ytitle">{{ discount[index].text }}</div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待映">
          <div class="hostbox" v-for="(item, index) in coming" :key="index">
            <div class="hostLeft" @click="goDetails(item.id, true)">
              <div class="himg">
                <img
                  class="auto-img"
                  :src="item.img"
                  alt=""
                  v-lazy="item.img"
                />
              </div>
              <div class="textbox">
                <div class="htitle ont-text">{{ item.nm }}</div>
                <div class="hsum">猫眼评分：{{ item.sc }}</div>
                <div class="hren one-text">主演：{{ item.star }}</div>
                <div class="hren">上映日期：{{ item.rt }}</div>
              </div>
            </div>
            <div class="hostRight">
              <van-button
                color="#3C9FE6"
                size="small"
                round
                type="info"
                @click="goShop(item.id)"
                >预售</van-button
              >
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Search from "../components/Search.vue";
import Navi from "../components/Navi.vue";
export default {
  name: "Film",
  components: {
    Search,
    Navi,
  },
  data() {
    return {
      value: "-1",
      value1: -1,
      id: "",
      time: "",
      district: [],
      updata: [],
      discount: [],
      services: [],
      active: 1,
      host: [],
      coming: [],
      shu: 0
    };
  },
  created() {
    this.getTime();
    this.getHost();
    this.getDai();
    let localData = localStorage.getItem("data").slice(1, -1).split(",");
    if (localData[localData.length - 2].length === 10) {
      this.id = localData[localData.length - 2].slice(6).split('"')[1];
    } else if (localData[localData.length - 2].length === 8) {
      this.id = localData[localData.length - 2].slice(-2);
    } else {
      this.id = localData[localData.length - 2].slice(-1);
    }

    if (this.$refs.item === undefined) {
      this.getOne(this.id,this.value1,this.time);
    }
    this.getYingyuan(this.id);

    if (this.$route.params.active === undefined) {
      this.active = 1;
    } else {
      this.active = this.$route.params.active;
    }
  },
  methods: {
    getYingyuan(id) {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/maoyan/index/filterCinemas?ci=" + id,
      })
        .then((result) => {
          //行政区
          result.data.district.subItems = JSON.parse(
            JSON.stringify(result.data.district.subItems).replace(
              /name/g,
              "text"
            )
          );
          result.data.district.subItems = JSON.parse(
            JSON.stringify(result.data.district.subItems).replace(
              /id/g,
              "value"
            )
          );
          result.data.district.subItems.forEach((v) => {
            v.text = v.text + "(" + v.count + ")";
          });
          console.log(result.data.district.subItems);
          this.district = result.data.district.subItems;
           
          
          
        })
        .catch((err) => {});
    },
    getTime() {
      function getDateTime(type) {
        let date = new Date();
        let hengGang = "-";
        let maoHao = ":";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let curDate = date.getDate();
        let curHours = date.getHours();
        let curMinutes = date.getMinutes();
        let curSeconds = date.getSeconds();

        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (curDate >= 0 && curDate <= 9) {
          curDate = "0" + curDate;
        }
        if (curHours >= 0 && curHours <= 9) {
          curHours = "0" + curHours;
        }
        if (curMinutes >= 0 && curMinutes <= 9) {
          curMinutes = "0" + curMinutes;
        }
        if (curSeconds >= 0 && curSeconds <= 9) {
          curSeconds = "0" + curSeconds;
        }
        let currentdate = "";
        if (type == "year") {
          currentdate = year;
          return currentdate;
        } else if (type == "month") {
          currentdate = year + hengGang + month;
          return currentdate;
        } else {
          currentdate =
            year +
            hengGang +
            month +
            hengGang +
            curDate +
            " " +
            curHours +
            maoHao +
            curMinutes +
            maoHao +
            curSeconds;
          return currentdate;
        }
      }
      let date = getDateTime("").split(" ");
      this.time = date[0];
    },
    getId() {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/maoyan/index/moreCinemas?day=" +
          this.time +
          "&offset="+this.shu+"&limit=20&districtId="+this.value1+"&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item&updateShowDay=true&reqId=1636710166221&cityId=" +
          this.id,
      })
        .then((result) => {
          this.$toast("加载成功！");
          console.log(result);
          
          result.data.forEach((v) => {
            this.updata.push(v);
            this.discount.push(v.discount[0]);
            this.services.push(v.services.slice(0, 3));
          });

          for (let i = 0; i < this.discount.length; i++) {
            if (this.discount[i] === undefined) {
              this.discount[i] = {
                card: "//p1.meituan.net/scarlett/ff1c6e33ed0ac3cd862910a83d4bf959583.png",
                text: "开卡特惠，10.9元起开卡",
              };
            }
          }
        })
        .catch((err) => {});
    },
    getOne(cityid, disid, time) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/maoyan/index/moreCinemas?day=" +
          time +
          "&offset="+this.shu+"&limit=20&districtId="+disid+"&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item&updateShowDay=true&reqId=1636710166221&cityId=" +
          cityid,
      })
        .then((result) => {
          this.$toast("加载成功！");
          console.log(result);
          result.data.forEach((v) => {
            this.updata.push(v);
            this.discount.push(v.discount[0]);
            this.services.push(v.services.slice(0, 3));
          });

          for (let i = 0; i < this.discount.length; i++) {
            if (this.discount[i] === undefined) {
              this.discount[i] = {
                card: "//p1.meituan.net/scarlett/ff1c6e33ed0ac3cd862910a83d4bf959583.png",
                text: "开卡特惠，10.9元起开卡",
              };
            }
          }
        })
        .catch((err) => {});
    },
    getId1() {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/maoyan/index/moreCinemas?day=" +
          this.time +
          "&offset="+this.shu+"&limit=20&districtId="+this.value1+"&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item&updateShowDay=true&reqId=1636710166221&cityId=" +
          this.id,
      })
        .then((result) => {
          this.$toast("加载成功！");
          console.log(result);
          this.updata=[];
          result.data.forEach((v) => {
            this.updata.push(v);
            this.discount.push(v.discount[0]);
            this.services.push(v.services.slice(0, 3));
          });

          for (let i = 0; i < this.discount.length; i++) {
            if (this.discount[i] === undefined) {
              this.discount[i] = {
                card: "//p1.meituan.net/scarlett/ff1c6e33ed0ac3cd862910a83d4bf959583.png",
                text: "开卡特惠，10.9元起开卡",
              };
            }
          }
        })
        .catch((err) => {});
    },


    getHost() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/maoyan/index/movieOnInfoList",
      })
        .then((result) => {
          this.host = result.data.movieList;
        })
        .catch((err) => {});
    },
    getDai() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/maoyan/index/comingList?ci=1&limit=12",
      })
        .then((result) => {
          this.coming = result.data.coming;
        })
        .catch((err) => {});
    },
    goDetails(id, type) {
      this.$router.push({ name: "Details", params: { id, type } });
    },
    goShop(id) {
      this.$router.push({ name: "Shop", params: { id } });
    },
    goCinema(id, cityid, addr, title, time) {
      this.$router.push({
        name: "Cinema",
        params: { id, cityid, addr, title, time },
      });
    },
    sollFn() {
      let jjj = this.$refs.jjj;
      let jjjTop = jjj.scrollTop;
      let jjjHeight = jjj.offsetHeight;
      let jjjScrollHeight = jjj.scrollHeight;
      if(jjjTop+jjjHeight>=jjjScrollHeight){
        this.shu+=20;
        this.getId();
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.van-tab {
  font-size: 18px;
}
/deep/.van-dropdown-menu__bar {
  background-color: #fffbfb;
}
.film {
  background-color: #fffdfd;
  margin-bottom: 55px;
}
.list {
  width: 100%;
  

  .hostbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
    .hostLeft {
      width: 80%;
      display: flex;
      .himg {
        width: 75px;
        border-radius: 10px;
        overflow: hidden;
      }
      .textbox {
        width: 190px;
        margin-left: 8px;
        .htitle {
          font-size: 18px;
          margin-bottom: 7px;
        }
        .hsum,
        .hren {
          font-size: 13px;
          color: #999;
          margin-bottom: 7px;
        }
      }
    }
    .hostRight {
      width: 70px;
      align-items: center;
      padding-top: 50px;
      padding-left: 13px;
      box-sizing: border-box;
    }
    /deep/.van-button--small {
      padding: 0 15px;
    }
  }
  .hostbox:last-child {
    border: 0;
  }

  .navbox {
    width: 100%;
  }
  .xuan {
    width: 100%;
    height: 420px;
    overflow: scroll;
    
    .item {
      width: 96%;
      margin: 0 auto;
      border-bottom: 2px solid rgb(239, 237, 237);
      padding: 15px 0;
      .tbox {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .title {
          width: 300px;
          font-size: 18px;
          // font-weight: bold;
        }
        .tsum {
          width: 80px;
          font-size: 18px;
          color: #fa2900;
          text-align: center;
        }
        .yuan {
          font-size: 14px;
        }
        .qi {
          font-size: 14px;
          color: #666;
        }
      }
      .dbox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #666;
        margin: 5px 0;
        .dtitle {
          width: 300px;
        }
      }
      .zhe {
        font-size: 13px;
        margin: 5px 0;
        width: 90%;
        display: flex;
        .tui {
          padding: 2px 3px;
          text-align: center;
          border-radius: 5px;
          margin-right: 3px;
          border: 2px solid rgb(255, 153, 0);
          color: rgb(255, 153, 0);
        }
      }
      .youhui {
        display: flex;
        align-items: center;
        .yimg {
          width: 15px;
          height: 15px;
          margin-right: 3px;
        }
        .ytitle {
          color: #999;
        }
      }
    }
  }
}
</style>